<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>55种css3动画特效代码</title>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script src="./js/script.js"></script>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id='container'>
        <h1>55种css3动画特效代码</h1>
        <hr />
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>1</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounce"
                    title="Play Animation">►</span><b>Effect ->effectBounce</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果 </div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>2</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceIn"
                    title="Play Animation">►</span><b>Effect ->effectBounceIn</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>3</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceInDown"
                    title="Play Animation">►</span><b>Effect ->effectBounceInDown</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>4</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceInLeft"
                    title="Play Animation">►</span><b>Effect ->effectBounceInLeft</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>5</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceInRight"
                    title="Play Animation">►</span><b>Effect ->effectBounceInRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>6</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceInUp"
                    title="Play Animation">►</span><b>Effect ->effectBounceInUp</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>7</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceOut"
                    title="Play Animation">►</span><b>Effect ->effectBounceOut</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>8</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceOutDown"
                    title="Play Animation">►</span><b>Effect ->effectBounceOutDown</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>9</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceOutLeft"
                    title="Play Animation">►</span><b>Effect ->effectBounceOutLeft</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>10</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceOutRight"
                    title="Play Animation">►</span><b>Effect ->effectBounceOutRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>11</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectBounceOutUp"
                    title="Play Animation">►</span><b>Effect ->effectBounceOutUp</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>12</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeIn"
                    title="Play Animation">►</span><b>Effect ->effectFadeIn</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>13</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeInDown"
                    title="Play Animation">►</span><b>Effect ->effectFadeInDown</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>14</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeInDownBig"
                    title="Play Animation">►</span><b>Effect ->effectFadeInDownBig</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>15</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeInLeft"
                    title="Play Animation">►</span><b>Effect ->effectFadeInLeft</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>16</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeInLeftBig"
                    title="Play Animation">►</span><b>Effect ->effectFadeInLeftBig</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>17</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeInRight"
                    title="Play Animation">►</span><b>Effect ->effectFadeInRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>18</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeInRightBig"
                    title="Play Animation">►</span><b>Effect ->effectFadeInRightBig</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>19</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeInUp"
                    title="Play Animation">►</span><b>Effect ->effectFadeInUp</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>20</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeInUpBig"
                    title="Play Animation">►</span><b>Effect ->effectFadeInUpBig</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>21</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeOut"
                    title="Play Animation">►</span><b>Effect ->effectFadeOut</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>22</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeOutDown"
                    title="Play Animation">►</span><b>Effect ->effectFadeOutDown</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>23</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeOutDownBig"
                    title="Play Animation">►</span><b>Effect ->effectFadeOutDownBig</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>24</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeOutLeft"
                    title="Play Animation">►</span><b>Effect ->effectFadeOutLeft</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>25</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeOutLeftBig"
                    title="Play Animation">►</span><b>Effect ->effectFadeOutLeftBig</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>26</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeOutRight"
                    title="Play Animation">►</span><b>Effect ->effectFadeOutRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>27</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeOutRightBig"
                    title="Play Animation">►</span><b>Effect ->effectFadeOutRightBig</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>28</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeOutUp"
                    title="Play Animation">►</span><b>Effect ->effectFadeOutUp</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>29</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFadeOutUpBig"
                    title="Play Animation">►</span><b>Effect ->effectFadeOutUpBig</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>30</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFlash"
                    title="Play Animation">►</span><b>Effect ->effectFlash</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>31</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFlip"
                    title="Play Animation">►</span><b>Effect ->effectFlip</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>32</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFlipInX"
                    title="Play Animation">►</span><b>Effect ->effectFlipInX</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>33</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFlipInY"
                    title="Play Animation">►</span><b>Effect ->effectFlipInY</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>34</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFlipOutX"
                    title="Play Animation">►</span><b>Effect ->effectFlipOutX</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>35</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectFlipOutY"
                    title="Play Animation">►</span><b>Effect ->effectFlipOutY</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>36</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectLightSpeedIn"
                    title="Play Animation">►</span><b>Effect ->effectLightSpeedIn</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>37</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectLightSpeedOut"
                    title="Play Animation">►</span><b>Effect ->effectLightSpeedOut</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>38</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectRotateInDownRight"
                    title="Play Animation">►</span><b>Effect ->effectRotateInDownRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>39</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectRotateInUpLeft"
                    title="Play Animation">►</span><b>Effect ->effectRotateInUpLeft</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>40</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectRotateInUpRight"
                    title="Play Animation">►</span><b>Effect ->effectRotateInUpRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>41</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectRotateOut"
                    title="Play Animation">►</span><b>Effect ->effectRotateOut</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>42</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectRotateOutDownLeft"
                    title="Play Animation">►</span><b>Effect ->effectRotateOutDownLeft</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>43</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectRotateOutDownRight"
                    title="Play Animation">►</span><b>Effect ->effectRotateOutDownRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>44</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectRotateOutUpLeft"
                    title="Play Animation">►</span><b>Effect ->effectRotateOutUpLeft</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>45</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectRotateOutUpRight"
                    title="Play Animation">►</span><b>Effect ->effectRotateOutUpRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>46</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectShake"
                    title="Play Animation">►</span><b>Effect ->effectShake</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>47</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectSlideInDown"
                    title="Play Animation">►</span><b>Effect ->effectSlideInDown</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>48</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectSlideInLeft"
                    title="Play Animation">►</span><b>Effect ->effectSlideInLeft</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>49</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectSlideInRight"
                    title="Play Animation">►</span><b>Effect ->effectSlideInRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>50</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectSlideOutLeft"
                    title="Play Animation">►</span><b>Effect ->effectSlideOutLeft</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>51</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectSlideOutRight"
                    title="Play Animation">►</span><b>Effect ->effectSlideOutRight</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>52</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectSlideOutUp"
                    title="Play Animation">►</span><b>Effect ->effectSlideOutUp</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>53</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectSwing"
                    title="Play Animation">►</span><b>Effect ->effectSwing</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>54</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectTada"
                    title="Play Animation">►</span><b>Effect ->effectTada</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div>
        <div class="BlogEntry">
            <div class="BlogEntryImg"><span>55</span></div>
            <div class="BlogEntryText"><span class="PlayButton Effect-effectWobble"
                    title="Play Animation">►</span><b>Effect ->effectWobble</b>
                <div class="BlogEntryNotes"><span style="color:#cc0000;">Note:</span>点击 "►" 按钮查看动画效果</div>
            </div>
        </div><br />
        <hr /><br />
    </div>
</body>

</html>